
//#region 添加css文件
/**
 * 添加css文件
*/
function addCssFile(url) {
    Overlay("open");
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    link.onload = function(){
        Overlay("close");
    }
    document.head.appendChild(link);
}
//#endregion

//#region 删除css文件
/**
 * 删除css文件
*/
function removeCssFile(url) {
    var stylesheets = document.styleSheets;

    // 遍历样式表
    for (var i = 0; i < stylesheets.length; i++) {
        // 检查href属性
        if (stylesheets[i].href && stylesheets[i].href.indexOf(url) !== -1) {
            // 获取样式表的link元素
            var link = stylesheets[i].ownerNode;

            // 删除link元素
            link.parentNode.removeChild(link);
            break;
        }
    }
}
//#endregion

//#region 跳转到指定页面
/**跳转到指定页面 */
function updataUrl(url) {
    document.querySelectorAll(".container").forEach((item) => {
        item.style.display = 'none'; // 隐藏所有页面
    })
    history.pushState({}, '', location.origin + location.pathname + "#/" + url);
    switch (url) {
        case 'login':
            removeCssFile('chat.css');
            addCssFile('login.css');
            break;
        case 'chat':
            removeCssFile('login.css');
            addCssFile('chat.css');
            break;
    }
    document.getElementById(url).style.display = 'block'; // 显示对应的页面
}

//#endregion

//#region 遮罩层
function Overlay(sw) {
    switch (sw) {
        case "close":
            document.getElementById("overlay").style.display = 'none'; // 关闭遮罩层
            break;
        case "open":
            document.getElementById("overlay").style.display = 'block'; // 打开遮罩层
            break;
    }
}
//#endregion

//#region 登录
/**
 * 登录
 */
function login() {
    //续写socket
    let username = document.getElementById("text").value;
    let Receiver = document.getElementById("Receiver").value;
    let data = {
        username,
        Receiver
    }
    if(username){
        sendMsg(data,function(soket){
            updataUrl('chat');
            Message(soket);
        })
    }
}
//#endregion

//#region 聊天样式和接受消息功能
/**聊天样式 */
function messageCss(socket){
    socket.onmessage = async function(event){
        let data = await JSON.parse(event.data);
        var messages = document.getElementById('messages');
        var newMessage = document.createElement('div');
        newMessage.innerText = data.message;
        if(data.username == SENDDATA.username){
            //向右
            newMessage.style.textAlign = 'right';
        }else{
            //向左
            newMessage.style.textAlign = 'left';
        }
        messages.appendChild(newMessage);
        document.getElementById('message').value = '';
        scrollToBottom()
    }
}
//#endregion

//#region 聊天内容
/**聊天内容 */
function Message(socket){
    document.getElementById("messageForm").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单提交的默认行为
        var message = document.getElementById("message").value;
        let data = {
            ...SENDDATA,
            message
        }
        socket.send(JSON.stringify(data));
    })
    messageCss(socket)
}
//#endregion

//#region 消息窗口置底
/**消息窗口置底 */
function scrollToBottom() {
    var messages = document.getElementById('messages');
    messages.scrollTop = messages.scrollHeight + 100;
}
//#endregion


//#region 自执行函数
! function(){
    document.getElementById("loginForm").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单提交的默认行为
        login();
    })
    updataUrl('login'); //默认打开登录页面
}(); // 自执行函数，保证代码在DOMContentLoaded事件之前执行

//#endregion
